<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head('分类编写')"></head>
<body class="m-opacity-mini">

  <!--导航-->
  <nav th:replace="admin/_fragments :: nav(2)" ></nav>
  <br>
  <br>
  <br>
  <br>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">

      <!-- 添加表单，type 为 null -->
      <form th:action="@{/admin/types}" method="post" class="ui form" th:if="${type == null}">
      <div class="required field">
        <div class="ui left labeled input">
          <label class="ui teal basic label">名称</label>
          <input type="text" name="name" placeholder="请输入分类名称" >
        </div>
      </div>
      <div class="ui message" th:unless="${#strings.isEmpty(nameError)}">
        <div class="ui negative message" >
          <i class="close icon"></i>
          <div class="header">提示：</div>
          <p th:text="${nameError}"></p>
        </div>
      </div>
      <div class="ui right aligned container">
        <button type="submit" class="ui teal button">发布</button>
      </div>
    </form>

    <!-- 修改表单，type 不为 null -->
    <form th:action="@{/admin/types/update}" method="post" th:object="${type}" class="ui form" th:if="${type != null}">
      <div>
        <input type="hidden" name="id" th:value="${type.getId()}">
      </div>
      <div class="required field">
        <div class="ui left labeled input">
          <label class="ui teal basic label">名称</label>
          <input type="text" name="name" placeholder="请输入分类名称" th:value="${type.getName()}" >
        </div>
      </div>
      <div class="ui message" th:unless="${#strings.isEmpty(nameError)}">
        <div class="ui negative message" >
          <i class="close icon"></i>
          <div class="header">提示：</div>
          <p th:text="${nameError}"></p>
        </div>
      </div>

      <div class="ui right aligned container">
        <button type="submit" class="ui teal button">发布</button>
      </div>
    </form>


    </div>
  </div>


  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="admin/_fragments :: footer"></footer>

  <!--导入的script-->
  <th:block th:replace="admin/_fragments :: script">
  </th:block>
  <script src="../../static/lib/editormd/editormd.min.js"></script>

  <script>

    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

    $('.ui.form').form({
      fields : {
        name : {
          identifier: 'name',
          rules: [{
            type : 'empty',
            prompt: '请输入分类名称'
          }]
        }
      }
    });


  </script>
</body>
</html>